<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rand100</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    #canvas {
        display: block;
        margin: 0 auto;
        border: 1px solid blue;
    }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
</html>
<script type="text/javascript">
    var oCanvas = document.querySelector("canvas");
    var context = canvas.getContext("2d");
    oCanvas.width = 1600;
    oCanvas.height = 768;

    function rand(min, max) {
        return parseInt(Math.random() * (max - min)) + min;
    }

    function drawArc(xOrigin, yOrigin, r, sNum, eNum, color, lineWidth) {
        context.beginPath();
        context.strokeStyle = color;
        context.lineWidth = lineWidth;
        // context.moveTo(xOrigin, yOrigin);
        context.arc(xOrigin, yOrigin, r, Math.PI / 180 * sNum, Math.PI / 180 * eNum);
        context.closePath();
        context.stroke();
        
    }

    var length = 100;
    var flag = 0;   /*用于标记生成多少个符合条件的圆*/

    for (var i = 0; i < length; i++) {
        randArc();
    }    
    // console.log(flag);

    function randArc() {
        var x = rand(0, 1600);
        var y = rand(0, 768);
        var r = rand(5, 30);
        var start = rand(0,0);
        var end = rand(360,360);
        var color1 = `rgba(${rand(0,255)}, ${rand(0,255)}, ${rand(0,255)}, 1)`;
        var lineWidth = rand(1,10);

        // 定义 判断是否超出边界 的4个变量
        var judge1 = x - r - lineWidth/2;
        var judge2 = y - r - lineWidth/2;
        var judge3 = x + r + lineWidth/2;
        var judge4 = y + r + lineWidth/2;

        if (judge1 >= 0 && judge2 >= 0 && judge3 <= oCanvas.width && judge4 <= oCanvas.height) {
            drawArc(x, y, r, start, end, color1, lineWidth);
            flag++;
        } else {
            // 重新执行该函数直到满足if条件为止，否则所绘制的圆的数目就会减少
            randArc();
        }
    }
</script>